<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#username").blur(function () {
                var userId = $("#userId").val();
                if (userId == null) {
                    // 获取输入框的内容
                    var obj = $(this).val();
                    // 客户端进行校验
                    if (obj != null && obj.length >= 3 && obj.length <= 10) {
                        // 账号符合设定规则
                        $.get("user/checkUsername", {userName: obj}, function (res) {
                            if (res == "1") {
                                // 可用
                                $("#usernameI").html("<span style='color:green'> 账号可用 </span>")
                            } else {
                                // 数据库存在同名账号
                                $("#usernameI").html("<span style='color:red'> 账号存在，请重新输入 </span>")
                            }
                        })
                    } else {
                        alert('账号的长度必须是3~10位')
                    }
                }

            })
        })
    </script>
</head>

<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">首页</a></li>
        <li><a href="#">表单</a></li>
    </ul>
</div>

<div class="formbody">

    <div class="formtitle"><span>用户操作</span></div>
    <form action="user/saveUserInfo" method="post">
        <ul class="forminfo">
            <input name="user.userId" type="hidden" class="dfinput" id="userId" value="${user.userId}"/>
            <li><label>账号</label><input name="user.userName" type="text" value="${user.userName}" class="dfinput"
                                          id="username"/><i id="usernameI"></i></li>
            <li><label>密码</label><input name="user.password" type="text" value="${user.password}"
                                          class="dfinput"/><i></i></li>
            <li><label>姓名</label><input name="user.realName" type="text" value="${user.realName}"
                                          class="dfinput"/><i></i></li>
            <li><label>邮箱</label><input name="user.email" type="text" value="${user.email}" class="dfinput"/><i></i>
            </li>
            <li><label>电话</label><input name="user.phone" type="text" value="${user.phone}" class="dfinput"/><i></i>
            </li>
            <li><label>角色</label>
                <div style="height: 32px;line-height: 32px;">
                    <%--外层循环 取出所有的角色信息--%>
                    <c:forEach items="${roles}" var="role">
                        <!-- 声明一个变量记录是否勾选 -->
                        <c:set var="flag" value="false"></c:set>
                        <!-- 内层循环判断 外层循环的角色是否在当前用户具有的角色中 -->
                        <c:forEach items="${userRoleIds}" var="userRoleId">
                            <c:if test="${role.roleId eq userRoleId}">
                                <c:set var="flag" value="true"></c:set>
                            </c:if>
                        </c:forEach>
                        <input type="checkbox" value="${role.roleId}" ${flag eq true ?'checked':''}
                               name="roleIds">${role.roleName}
                        &nbsp;&nbsp;
                        <c:set var="flag" value="false"></c:set>
                    </c:forEach>
                    <i></i>
                </div>
            </li>

            <li><label>&nbsp;</label><input name="" type="submit" class="btn" value="确认保存"/></li>
        </ul>
    </form>


</div>
